import React from 'react'
import { NavBar, Form, Button, Radio, Space, Cascader, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { RightOutline } from 'antd-mobile-icons'
import axios from 'axios'


export default function Authentication() {
    const navigate = useNavigate()
    const back = () => {
        navigate(-1)
    }
    const [value, setValue] = React.useState('')
    const [value_1, setValue_1] = React.useState('')
    const [visible, setVisible] = React.useState(false);
    const [value_2, setValue_2] = React.useState([]);
    const ren = async () => {
        let obj = {
            student: value,
            name: value_1,
        }
        let res = await axios.post('http://localhost:3000/status', obj)
        console.log(res);
        if (res.data.code === 200) {
            Toast.show({
                icon: 'success',
                content: '认证成功',
            })
            navigate('/app/home')
        }
    }
    const options = [
        {
            label: '河北',
            value: '河北',
            children: [
                {
                    label: '保定莲池区',
                    value: '保定莲池区',
                    children: [
                        {
                            label: '理工学院',
                            value: '理工学院',
                        },
                        {
                            label: '信工中专',
                            value: '信工中专',
                        },
                        {
                            label: '枕套教育',
                            value: '枕套教育',
                            disabled: false,
                        },
                    ],
                },
                {
                    label: '张家口宣化区',
                    value: '张家口宣化区',
                    children: [
                        {
                            label: '宣科院',
                            value: '宣科院',
                        },
                        {
                            label: '宣大',
                            value: '宣大',
                            disabled: false,
                        },
                        {
                            label: '八中',
                            value: '八中',
                        },
                    ],
                },
                {
                    label: '宁波',
                    value: '宁波',
                    children: [
                        {
                            label: '海曙区',
                            value: '海曙区',
                        },
                        {
                            label: '江北区',
                            value: '江北区',
                        },
                        {
                            label: '镇海区',
                            value: '镇海区',
                        },
                    ],
                },
            ],
        },
        {
            label: '安徽',
            value: '安徽',
            children: [
                {
                    label: '合肥',
                    value: '合肥',
                    children: [
                        {
                            label: '包河区',
                            value: '包河区',
                        },
                        {
                            label: '蜀山区',
                            value: '蜀山区',
                        },
                        {
                            label: '瑶海区',
                            value: '瑶海区',
                        },
                    ],
                },
                {
                    label: '芜湖',
                    value: '芜湖',
                    children: [
                        {
                            label: '镜湖区',
                            value: '镜湖区',
                        },
                        {
                            label: '弋江区',
                            value: '弋江区',
                        },
                        {
                            label: '湾沚区',
                            value: '湾沚区',
                        },
                    ],
                },
            ],
        },
        {
            label: '江苏',
            value: '江苏',
            children: [
                {
                    label: '南京',
                    value: '南京',
                    children: [
                        {
                            label: '玄武区',
                            value: '玄武区',
                        },
                        {
                            label: '秦淮区',
                            value: '秦淮区',
                        },
                        {
                            label: '建邺区',
                            value: '建邺区',
                        },
                    ],
                },
                {
                    label: '苏州',
                    value: '苏州',
                    children: [
                        {
                            label: '虎丘区',
                            value: '虎丘区',
                        },
                        {
                            label: '吴中区',
                            value: '吴中区',
                        },
                        {
                            label: '相城区',
                            value: '相城区',
                        },
                    ],
                },
            ],
        },
    ]
    return (
        <div>
            <NavBar onBack={back}></NavBar>
            <div>
                <h2 style={{ textAlign: 'center' }}>认证身份</h2>
                <p style={{ textAlign: 'center', color: 'rgb(153,153,153)', marginTop: '10px' }}>请谨慎埴写学号信息，认证后不能修改</p>
            </div>
            <div style={{ marginTop: '100px' }}>
                <Space align='center'>
                    <p style={{ fontSize: '18px', marginLeft: '15px', marginBottom: '20px' }} onClick={() => {
                        setVisible(true);
                    }}>请选择学院/校区<RightOutline style={{ position: 'fixed', top: '203px', left: '350px' }} /></p>

                    <Cascader options={options} visible={visible} onClose={() => {
                        setVisible(false);
                    }} value={value_2} onConfirm={setValue_2} onSelect={(val, extend) => {
                        console.log('onSelect', val, extend.items);
                    }}>
                        {items => {
                            if (items.every(item => item === null)) {
                                return '未选择';
                            }
                            else {
                                return items.map(item => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : '未选择'; }).join('-');
                            }
                        }}
                    </Cascader>
                </Space>
                <Form layout='horizontal'>
                    <Form.Item label=''>
                        <input placeholder='请输入学号' value={value} onChange={(e) => setValue(e.target.value)} style={{ border: 'none', width: '250px', height: '40px', fontSize: '18px' }} />
                    </Form.Item>
                    <Form.Item label=''>
                        <input placeholder='请输入姓名' value={value_1} onChange={(e) => setValue_1(e.target.value)} style={{ border: 'none', width: '250px', height: '40px', fontSize: '18px' }} />
                    </Form.Item>
                </Form>
                <Button color='primary' fill='outline' onClick={ren} style={{ width: '250px', height: '50px', borderRadius: '30px', background: 'rgb(36,200,116)', color: 'white', marginTop: '50px', marginLeft: '65px' }}>
                    提交认证
                </Button>
                <Space direction='vertical' style={{ 'marginTop': '30px', marginLeft: '60px' }}>
                    <Radio style={{ '--icon-size': '15px' }}><span style={{ fontSize: '15px' }}>我已阅读并同意签署 学号认证协议</span></Radio>
                </Space>
                <p style={{ textAlign: 'center', marginTop: '200px', color: 'rgb(153,153,153)', fontSize: '15px' }}>暂不认证</p>
            </div>
        </div>
    )
}
